<template>
	<view class="work">
		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);">
			<uni-nav-bar color="#333" left-icon="left" title="助力直播间" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="content flex_center">
			<view class="content_image">
				<u-image radius="24rpx" :src="live.cover_img" width="176rpx" height="176rpx">
					<template v-slot:loading>
						<u-loading-icon color="red" mode="semicircle"></u-loading-icon>
					</template>
				</u-image>
			</view>
			<view class="content_text flex_c">
				<text class="hidden_3">{{ live.name }}</text>
				<view>ID:{{ live.id }}</view>
			</view>
		</view>

		<view class="form">
			<view class="form_title">选择曝光次数</view>
			<view class="config_box">
				<scroll-view scroll-x="true">
					<view class="config flex_center">
						<view class="item" :id="config_id == item.id ? 'select' : ''" v-for="(item,index) in config"
							:key="index" @click="chooseConfig(item)">

							<view class="top">
								<i>{{ item.num }}</i>
								<text>曝光</text>
							</view>

							<view class="line"></view>

							<view class="price">
								{{
									(Number(item.price) * 10).toFixed(0)
									
								}}金币
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="form">
			<view class="form_title">投放画像</view>
			<view class="content">
				<view class="content_list flex_r_between" @click="toChooseAddress">
					<view class="label">地区</view>
					<view class="right flex_center">
						<text>{{ areaSelect.length ? `已选择${areaSelect.length}个地区` : '不限' }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

				<view class="content_list flex_r_between" @click="picker_flag = true">
					<view class="label">性别</view>
					<view class="right flex_center">
						<text>{{ sex }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

				<view class="content_list flex_r_between" @click="age_flag = true">
					<view class="label">年龄</view>
					<view class="right flex_center">
						<text>{{ min ? `${min} - ${max}` : '不限' }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

			</view>
		</view>

		<wheel ref="wheel" v-if="isShow == 1"></wheel>

		<!-- 性别弹窗 -->
		<u-picker closeOnClickOverlay :show="picker_flag" :columns="[['不限' , '男' , '女']]" @close="picker_flag = false"
			@cancel="picker_flag = false" @confirm="onSex">
		</u-picker>

		<!-- 年龄 -->
		<u-popup :show="age_flag" @close="age_flag = false" :round="20" :safeAreaInsetBottom="false">
			<view class="age">
				<view class="title">请输入年龄范围</view>
				<view class="age_input flex_center">
					<view class="num">
						<u-input border="none" placeholder="请输入" type="number" maxlength="2" v-model="min">
							<u-text text="岁" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
						</u-input>
					</view>

					<u-icon name="minus"></u-icon>

					<view class="num">
						<u-input border="none" placeholder="请输入" type="number" maxlength="2" v-model="max">
							<u-text text="岁" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
						</u-input>
					</view>
				</view>

				<view class="age_button" @click="ageSubmit">确认</view>
			</view>
		</u-popup>

		<!-- 推广二次确认 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="show_submit" @close="show_submit = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<view class="show_submit">
					<view class="submit_title">动态推广</view>
					<view class="submit_content flex_center">
						<view class="image">
							<u-image radius="16rpx" :src="live.cover_img" width="144rpx" height="144rpx">
								<template v-slot:loading>
									<u-loading-icon color="red" mode="semicircle"></u-loading-icon>
								</template>
							</u-image>
						</view>
						<view class="text">
							<view class="content_text hidden_3">
								{{ live.name }}
							</view>
							<view class="text_item flex_r_between">
								<text>曝光量</text>
								<view>{{ submit_config.num }}曝光量</view>
							</view>
							<view class="text_item flex_r_between">
								<text>推广费</text>
								<i>{{ (Number(submit_config.price) * 10).toFixed(0)}}金币</i>
							</view>
						</view>
					</view>
					<view class="submit_from">
						<view class="label">投放画像</view>
						<view class="item flex_r_between">
							<text>地区</text>
							<text>{{ areaSelect.length ? `已选择${areaSelect.length}个地区` : '不限' }}</text>
						</view>
						<view class="item flex_r_between">
							<text>性别</text>
							<text>{{ sex }}</text>
						</view>
						<view class="item flex_r_between">
							<text>年龄</text>
							<text>{{ min ? `${min} - ${max}` : '不限' }}</text>
						</view>
					</view>

					<view class="submit_btn" @click="onSubmit">确认推广</view>

					<view class="close_icon" @click="show_submit = false">
						<u-icon name="close-circle" size="40rpx"></u-icon>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 推广成功 展示获得次数 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :closeOnClickOverlay="true" mode="center" :show="get_wheel" bgColor="transparent"
				@close="get_wheel = false">
				<view class="get_wheel flex_c"
					:style="`background: url(${$util.prefix('extension/extension_success_detail_bg.png')}) 0 0 no-repeat;`">

					<view class="get_wheel_title">助力作品</view>

					<view class="get_wheel_content flex_center">
						<view class="image">
							<image :src="live.cover_img" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="content_text hidden">
								{{ live.name }}
							</view>
							<view class="text_item flex_r_between">
								<text>曝光量</text>
								<view>{{ submit_config.num }}曝光量</view>
							</view>
							<view class="text_item flex_r_between">
								<text>推广费</text>
								<i>{{ (Number(submit_config.price) * 10).toFixed(0)}}金币</i>
							</view>
						</view>
					</view>

					<view class="get_wheel_text flex_center">
						<text>推广中</text>
						<view>详细数据请前往推广订单查看</view>
					</view>

					<view class="get_wheel_rich flex_c">
						<!-- <view>奖励xxx人气豆</view> -->
						<view>恭喜您获得</view>
						<!-- <text>您可以直接收下，也可以兑换xxx次抽奖机会 获得更多人气豆</text> -->
						<text>{{ wheel_num }}次抽奖机会</text>
					</view>


					<view class="get_wheel_btn flex_r_between">
						<view class="btn_item cancel flex_r_around" @click="submitWheel(1)">
							<text>直接收下</text>
						</view>
						<view class="btn_item confim flex_r_around" @click="submitWheel(2)">
							<text>去抽奖</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>

		<view class="fixed_btn flex_r_between">
			<view class="box">
				<view class="price flex_center">
					<text>需要支付</text>
					<view>{{ (Number(config_price) * 10).toFixed(0) }}金币</view>
				</view>
			</view>
			<view class="view" @click="readySubmit">确认推广</view>
		</view>

		<!-- 加载 loading -->
		<wLoading ref="loading"></wLoading>

	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	import wheel from './components/wheel.vue';
	export default {
		data() {
			return {
				rid: 0,

				live: {},

				config: [],

				// 提交参数 投放地区
				areaSelect: [],
				sex: '不限',
				min: '',
				max: '',
				config_id: 0,
				config_price: 0,
				config_num: 0,
				pay_type: 6,


				// 弹窗控制
				picker_flag: false,
				age_flag: false,
				get_wheel: false,

				show_submit: false,
				submit_config: {},

				flag: true,

				wheel_num: 1,
				// 控制转盘是否显示
				isShow: 0,
			}
		},
		components: {
			wLoading,
			wheel,
		},
		methods: {
			getInfo() {
				this.$get('/popularize/getMyRoomInfo', {
					rid: this.rid
				}, false, (res) => {
					if (res.code == 1) {
						this.live = res.data;
					} else {
						this.$util.msg(res.msg)
					}
				}).then(res => {
					this.live = res.data;
				})
			},

			getConfig() {
				this.$post('/popularize/getPopularizeConfig').then(res => {
					res.data.list.forEach(element => {
						if (element.id == 2) {
							this.config = element.child;
							if (this.config.length) {
								this.chooseConfig(this.config[0]);
							}
						}
					});
				});
			},

			preventHandler() {
				return;
			},

			// 选择地址
			toChooseAddress() {
				uni.navigateTo({
					url: '/pages/generalization/address',
					events: {
						getAddress: (data) => {
							this.areaSelect = data.address;
						}
					},
					success: res => {
						// console.log(res,'传递');
						// res.eventChannel.emit('defultAddress', this.areaSelect)
					}
				});
			},

			// 性别
			onSex(e) {
				this.picker_flag = false;
				this.sex = e.value[0];
			},

			// 年龄
			ageSubmit() {
				var min = this.min;

				if (!this.min) {
					return this.$util.msg('请输入投放年龄');
				}
				if (!this.max) {
					return this.$util.msg('请输入投放年龄');
				}

				if (min > this.max) {
					this.min = this.max
					this.max = min
				}

				if (this.min < 18 || this.max < 18) {
					return this.$util.msg('投放年龄最低为18岁');
				}

				this.age_flag = false;
			},

			// 选择配置
			chooseConfig(item) {
				this.config_id = item.id;
				this.config_price = item.price;
				this.config_num = item.num;
			},

			// 提交弹窗
			readySubmit() {
				if (!this.rid) {
					return this.$util.msg('请先选择推广房间');
				} else {
					this.submit_config = this.config.find(item => item.id == this.config_id);
					this.show_submit = true;
				}
			},

			// 总提交
			onSubmit() {
				if (!this.flag) {
					return;
				}
				if (this.min && this.max && (this.min < 18 || this.max < 18)) {
					return this.$util.msg('投放年龄最低为18岁');
				}

				this.$refs.loading.open();
				this.flag = false;

				this.$post('/popularize/savePopularize', {
					type: 2,
					district: JSON.stringify(this.areaSelect),
					gender: this.sex == '男' ? 1 : this.sex == '女' ? 0 : 2,
					age: this.min ? `${this.min}-${this.max}` : '',
					pay_type: 6,
					active_ids: this.rid,
					popularize_config_id: this.config_id,
					num: this.config_num,
					profile: '',
					account: uni.getStorageSync('account') ? uni.getStorageSync('account') : '1',
				}, false, (res) => {
					this.endSubmit();
					if (res.code == 401) {
						if (uni.getSystemInfoSync().platform == 'android') {
							this.$native.toJinBiRecharge()
						} else {
							this.$native.toJinBiRecharge()
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							confirmText: '我知道了',
						})
					}
				}).then(res => {
					this.getWheelNum(this.config_id);
					this.get_wheel = true;
					this.endSubmit();
					this.getInitInfo();
				});
			},

			endSubmit() {
				this.show_submit = false;
				this.$refs.loading.close();
				this.flag = true;
			},

			getWheelNum(id) {
				var index = 0;
				var price = 1;
				index = this.config.findIndex((element) => element.id == id);
				price = Number(this.config[index].price);
				this.wheel_num = Math.floor(price / 10);
			},

			submitWheel(type) {
				this.get_wheel = false;
				if (type != 1) {
					// this.$util.toUrl('/pages/extension/blind');
					this.toBottom();
				}
			},
			
			// 抽奖初始化
			getInitInfo() {
				this.$get('/active.trafficPrizeV2/getInitInfo').then(res => {
					this.isShow = res.data.isShow;
					if (res.data.isShow == 1) {
						this.$nextTick(() => {
							this.$refs.wheel.prizeList = res.data.prizeList;
							this.$refs.wheel.haveNum = res.data.haveNum;
							this.toBottom();
						});
					}
				});
			},
			
			toBottom() {
				this.tab = 1;
				this.$nextTick(() => {
					uni.pageScrollTo({
						selector: '.wheel_bottom'
					});
				});
			},

		},

		onLoad(option) {
			this.rid = option.rid;
			if (option.token && option.cid && option.terminal) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.getInfo();
			this.getConfig();
			this.getInitInfo();
		}
	}
</script>

<style lang="less" scoped>
	.work {
		padding: 24rpx 0 200rpx;
	}

	.content {
		background: #FFFFFF;
		border-radius: 36rpx;
		padding: 24rpx 32rpx;
		overflow: hidden;

		.content_image {
			margin-right: 24rpx;
		}

		.content_text {
			flex: 1;
			overflow: hidden;
			height: 120rpx;
			align-items: flex-start;
			justify-content: space-between;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #131313;
			}

			view {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}
	}

	.form {
		margin: 20rpx 0 20rpx;
		background: #FFFFFF;
		padding: 0 0 34rpx;
		border-radius: 24rpx;

		.form_title {
			font-weight: 500;
			font-size: 30rpx;
			color: #131313;
			line-height: 42rpx;
			padding: 24rpx;
		}

		.tab {
			padding: 0 24rpx 60rpx;
			height: 160rpx;
			background-size: 100% !important;
			margin-bottom: -30rpx;

			#select {
				font-weight: 500;
				font-size: 30rpx;
				color: #131313;
			}

			view {
				flex: 1;
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
				text-align: center;
			}
		}

		.config_box {
			padding: 0 24rpx;
		}

		.config {
			position: relative;
			z-index: 2;

			#select {
				background: #FFEFF2;
				border: 2rpx solid #FD2A53;

				.line {
					background: #FFDCE3;
				}
			}

			.item {
				min-width: 150rpx;
				height: 168rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #EEEEEE;
				padding: 20rpx 16rpx 0 16rpx;
				margin-right: 12rpx;
				flex-shrink: 0;

				.top {
					i {
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
						line-height: 40rpx;
						font-style: normal;
					}

					text {
						font-size: 24rpx;
						color: #131313;
						line-height: 28rpx;
					}
				}

				.line {
					height: 2rpx;
					background: #EEEEEE;
					margin: 18rpx 0;
				}

				.price {
					font-weight: 600;
					font-size: 28rpx;
					color: #FD2A53;
					line-height: 32rpx;
				}
			}
		}

		.content {
			position: relative;
			z-index: 2;
			padding: 0 24rpx;

			.content_list {
				height: 100rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				overflow: hidden;
				padding: 0 32rpx;
				margin-bottom: 20rpx;

				.label {
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
					margin-right: 32rpx;
				}

				.right {
					flex: 1;
					overflow: hidden;

					text {
						flex: 1;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: right;
					}
				}
			}
		}
	}

	.age {
		height: 40vh;
		padding: 20rpx 32rpx 110rpx;
		position: relative;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 40rpx;
		}

		.num {
			margin: 0 16rpx;
			border: 4rpx solid #eee;
			padding: 10rpx;
			border-radius: 16rpx;
		}

		.age_button {
			width: 686rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			position: absolute;
			bottom: 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.fixed_btn {
		width: 100vw;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding: 0 32rpx 68rpx;

		.price {
			text {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				line-height: 40rpx;
			}

			view {
				font-weight: 600;
				font-size: 32rpx;
				color: #FD2A53;
				line-height: 40rpx;
				margin-left: 12rpx;
			}
		}

		.blacne {
			margin-top: 12rpx;

			text {
				font-size: 32rpx;
				color: #666666;
				line-height: 40rpx;
			}

			view {
				font-size: 28rpx;
				color: #FD2A53;
				line-height: 34rpx;
				margin-left: 12rpx;
			}
		}

		.view {
			width: 200rpx;
			height: 80rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.show_submit {
		width: 616rpx;
		padding: 40rpx 46rpx 60rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.submit_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.submit_content {
			overflow: hidden;

			.image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 144rpx;
					height: 194rpx;
				}
			}

			.text {
				flex: 1;

				.content_text {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					padding-bottom: 10rpx;
				}

				.text_item {
					margin-top: 14rpx;

					text {
						font-size: 26rpx;
						color: #666666;
						line-height: 36rpx;
					}

					view {
						font-weight: 500;
						font-size: 26rpx;
						color: #131313;
						line-height: 36rpx;
					}

					i {
						font-weight: 600;
						font-size: 32rpx;
						color: #FD2A53;
						line-height: 44rpx;
						font-style: normal;
					}
				}
			}
		}

		.submit_from {
			padding: 24rpx 0 0;
			border-top: 2rpx solid #F1F1F1;
			margin-top: 42rpx;

			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 12rpx;
			}

			.item {
				padding: 12rpx 0;

				text {
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
				}
			}

		}

		.submit_btn {
			width: 458rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 50rpx auto 0;
		}

		.close_icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

	}

	.get_wheel {
		width: 616rpx;
		background-size: 100% !important;
		padding: 40rpx 0 60rpx;
		border-radius: 36rpx;
		overflow: hidden;
		max-height: 828rpx;

		.get_wheel_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.get_wheel_content {
			overflow: hidden;
			margin: 40rpx 0 24rpx;
			padding: 0 46rpx;

			.image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 144rpx;
					height: 194rpx;
				}
			}

			.text {
				flex: 1;

				.content_text {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
				}

				.text_item {
					margin-top: 14rpx;

					text {
						font-size: 26rpx;
						color: #666666;
						line-height: 36rpx;
					}

					view {
						font-weight: 500;
						font-size: 26rpx;
						color: #131313;
						line-height: 36rpx;
					}

					i {
						font-weight: 600;
						font-size: 32rpx;
						color: #FD2A53;
						line-height: 44rpx;
						font-style: normal;
					}
				}
			}
		}

		.get_wheel_text {
			width: 100%;
			padding: 0 46rpx;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #0CA904;
				line-height: 34rpx;
			}

			view {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				margin-left: 8rpx;
			}
		}

		.get_wheel_rich {
			margin-top: 88rpx;
			padding: 0 58rpx;

			view {
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin-bottom: 24rpx;
			}

			text {
				font-size: 24rpx;
				color: #333333;
				line-height: 44rpx;
			}
		}

		.get_wheel_btn {

			margin: 44rpx 0 0;
			padding: 0 44rpx;
			width: 100%;

			.btn_item {
				width: 256rpx;
				height: 96rpx;
				border-radius: 48rpx;
				
				text {
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.cancel {
				background: #A69C9E;
			}

			.confim {
				background: #FD2A53;
			}
		}

	}
</style>